<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1> 变量的值= {{info}} </h1>
        <h1> 姓名= {{stname}} </h1>
    </div> 

    <script>
        var vm={
            el:'#app',
            elhtml:'',
            data:{
                info:'龙龟',
                stname:'temo'
            },
            update:function(){
                let div=document.querySelector("#app");
                let up=this.elhtml;
                for(let key in this.data){
                    up=up.replace("{{"+key+"}}",this.data[key])
                }
                div.innerHTML=up;
            }
        }
        vm.elhtml=document.querySelector("#app").innerHTML;
//循环加访问器
for(let key in vm.data){
    Object.defineProperty(vm,key,{
            set:function(v){
                console.log('自动调用',v);
                this.data[key]=v;
               this.update();
            }
        });
}

        
        vm.info='德玛'
        vm.stname="toooo"
        console.log(vm.data);
    </script>
</body>
</html>